<template>
  <view class="address-page">
    <!-- 地址列表 -->
    <scroll-view scroll-y class="address-list">
      <view
        v-for="(item, index) in addressList"
        :key="index"
        class="address-card"
        @click="selectAddress(index)"
      >
        <view class="info-section">
          <text class="name">{{ item.consignee }}</text>
          <text class="phone">{{ item.phone }}</text>
        </view>
        <text class="address">{{ item.detailAddress }}</text>
        <view class="operation">
          <view class="cuIcon-edit" @click.stop="editAddress(index)"></view>
          <view class="cuIcon-delete" @click.stop="deleteAddress(item)"></view>
        </view>
      </view>
    </scroll-view>

    <!-- 添加按钮 -->
    <view class="add-btn" @click="showPopup">
      <view class="cuIcon-add"></view>
      <text>添加收货地址</text>
    </view>

    <!-- 添加地址弹窗 -->
    <uni-popup ref="popup" type="bottom">
      <view class="popup-content">
        <view class="popup-header">
          <text>{{ editIndex === null ? "新增" : "编辑" }}收货地址</text>
          <view class="cuIcon-close" @click="closePopup"></view>
        </view>

        <view class="form-container">
          <view class="form-item">
            <input
              v-model="formData.consignee"
              placeholder="收货人姓名"
              class="form-input"
            />
          </view>
          <view class="form-item">
            <input
              v-model="formData.phone"
              placeholder="手机号码"
              class="form-input"
              type="number"
            />
          </view>
          <view class="form-item">
            <textarea
              v-model="formData.detailAddress"
              placeholder="详细地址"
              class="form-textarea"
            />
          </view>

          <view class="submit-btn" @click="submitAddress">
            <text>保存地址</text>
            <view class="cuIcon-check"></view>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      addressList: [
        // {
        //   consignee: "张三",
        //   phone: "13800138000",
        //   detailAddress: "北京市朝阳区望京街道科技园A座1001室",
        // },
        // {
        //   consignee: "李四",
        //   phone: "13912345678",
        //   detailAddress: "上海市浦东新区陆家嘴金融中心大厦",
        // },
      ],
      formData: {
        consignee: "",
        phone: "",
        detailAddress: "",
      },
      editIndex: null,
    };
  },
  onLoad() {
    this.getaddressList();
  },
  methods: {
    async getaddressList() {
      try {
        let res = await this.$api.list("address", {
          userId: uni.getStorageSync("userInfo").userId,
        });
        if (res.code == 200) {
          this.addressList = res.rows;
        }
      } catch (e) {}
    },
    showPopup() {
      this.$refs.popup.open();
    },
    closePopup() {
      this.$refs.popup.close();
      this.resetForm();
    },
    async submitAddress() {
      if (!this.formData.consignee)
        return uni.showToast({ title: "请输入收货人姓名", icon: "none" });
      if (!/^1[3-9]\d{9}$/.test(this.formData.phone))
        return uni.showToast({ title: "手机号格式错误", icon: "none" });
      if (!this.formData.detailAddress)
        return uni.showToast({ title: "请输入详细地址", icon: "none" });

      if (this.editIndex !== null) {
        // 编辑地址
        // this.addressList.splice(this.editIndex, 1, { ...this.formData });
        try {
          let res = await this.$api.update("address", this.formData);
          if (res.code == 200) {
            this.getaddressList();
          }
        } catch (error) {}
      } else {
        // 新增地址
        try {
          let res = await this.$api.add("address", {
            userId: uni.getStorageSync("userInfo").userId,
            ...this.formData,
          });
          if (res.code == 200) {
            this.getaddressList();
          }
        } catch (error) {}
        // this.addressList.unshift({ ...this.formData });
      }
      this.closePopup();
    },
    editAddress(index) {
      this.editIndex = index;
      this.formData = { ...this.addressList[index] };
      this.showPopup();
    },
    async deleteAddress(item) {
      let that = this
      uni.showModal({
        title: "确认删除",
        content: "确定要删除这个收货地址吗？",
        success: async(res) => {
          if (res.confirm) {
            // this.addressList.splice(index, 1);
            try {
          let res = await that.$api.del("address",item.id );
          if (res.code == 200) {
            that.getaddressList();
          }
        } catch (error) {}
          }
        },
      });
    },
    resetForm() {
      this.formData = {
        name: "",
        phone: "",
        address: "",
      };
      this.editIndex = null;
    },
  },
};
</script>

<style lang="scss" scoped>
.address-page {
  background: linear-gradient(15deg, #f8f9ff 0%, #f1f3fe 100%);
  min-height: 100vh;
  padding: 30rpx;
}

.address-list {
  height: calc(100vh - 160rpx);
}

.address-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20rpx);
  border-radius: 24rpx;
  padding: 32rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.1);

  .info-section {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;

    .name {
      font-size: 32rpx;
      color: #2d3748;
      font-weight: 500;
      margin-right: 40rpx;
    }

    .phone {
      font-size: 28rpx;
      color: #718096;
    }
  }

  .address {
    font-size: 28rpx;
    color: #4a5568;
    line-height: 1.6;
  }

  .operation {
    display: flex;
    justify-content: flex-end;
    margin-top: 24rpx;

    .cuIcon {
      font-size: 40rpx;
      color: #667eea;
      margin-left: 40rpx;
    }
  }
}

.add-btn {
  position: fixed;
  bottom: 40rpx;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 60rpx;
  padding: 24rpx 48rpx;
  display: flex;
  align-items: center;
  color: white;
  font-size: 32rpx;
  box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.3);

  .cuIcon-add {
    margin-right: 16rpx;
    font-size: 36rpx;
  }
}

.popup-content {
  background: rgba(255, 255, 255, 0.98);
  border-radius: 40rpx 40rpx 0 0;
  padding: 48rpx;

  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 48rpx;

    text {
      font-size: 36rpx;
      color: #2d3748;
      font-weight: 600;
    }

    .cuIcon-close {
      font-size: 36rpx;
      color: #718096;
      padding: 16rpx;
    }
  }
}

.form-item {
  margin-bottom: 40rpx;

  .form-input,
  .form-textarea {
    background: #f8f9ff;
    border-radius: 16rpx;
    padding: 24rpx;
    font-size: 28rpx;
    color: #2d3748;
    border: 2rpx solid #e2e8f0;

    &:focus {
      border-color: #667eea;
      box-shadow: 0 0 16rpx rgba(102, 126, 234, 0.2);
    }
  }

  .form-textarea {
    height: 200rpx;
  }
}

.submit-btn {
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 60rpx;
  height: 96rpx;
  color: white;
  font-size: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 48rpx;

  .cuIcon-check {
    margin-left: 16rpx;
    font-size: 36rpx;
  }

  &:active {
    transform: scale(0.98);
    opacity: 0.9;
  }
}
</style>
